<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Inplace</h1>
        <p>Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.</p>
    </div>
    <app-demoActions github="inplace" stackblitz="inplace-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>Basic</h5>
        <p-inplace closable="closable" [style]="{'min-height':'33px'}">
            <ng-template pTemplate="display">
                Click to Edit
            </ng-template>
            <ng-template pTemplate="content">
                <input type="text" value="PrimeNG" pInputText>
            </ng-template>
        </p-inplace>

        <h5>Image</h5>
        <p-inplace>
            <ng-template pTemplate="display">
                <div class="inline-flex align-items-center">
                    <span class="pi pi-image" style="vertical-align: middle"></span>
                    <span class="ml-2">View Picture</span>
                </div>
            </ng-template>
            <ng-template pTemplate="content">
                <img src="assets/showcase/images/demo/galleria/galleria5.jpg" alt="Nature">
            </ng-template>
        </p-inplace>

        <h5>Data</h5>
        <p-inplace>
            <ng-template pTemplate="display">
                <div class="inline-flex align-items-center">
                    <span class="pi pi-table" style="vertical-align: middle"></span>
                    <span class="ml-2">View Data</span>
                </div>
            </ng-template>
            <ng-template pTemplate="content">
                <p-table [value]="cars" responsiveLayout="scroll">
                    <ng-template pTemplate="header">
                        <tr>
                            <th>Vin</th>
                            <th>Year</th>
                            <th>Brand</th>
                            <th>Color</th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-car>
                        <tr>
                            <td>{{car.vin}}</td>
                            <td>{{car.year}}</td>
                            <td>{{car.brand}}</td>
                            <td>{{car.color}}</td>
                        </tr>
                    </ng-template>
                </p-table>
            </ng-template>
        </p-inplace>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;InplaceModule&#125; from 'primeng/inplace';
</app-code>

            <h5>Getting Started</h5>
            <p>Inplace requires two templates named <i>display</i> and <i>content</i> to represent the each state.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-inplace &gt;
    &lt;ng-template pTemplate="display"&gt;
        Click to Edit
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="content"&gt;
        &lt;input type="text" value="PrimeNG" pInputText&gt;
    &lt;/ng-template&gt;
&lt;/p-inplace&gt;
</app-code>

            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>active</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether the content is displayed or not.</td>
                        </tr>
                        <tr>
                            <td>disabled</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that the element should be disabled.</td>
                        </tr>
                        <tr>
                            <td>closable</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Displays a button to switch back to display mode.</td>
                        </tr>
                        <tr>
                            <td>preventClick</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled, instead of click events, the component can be controlled full programmatic with activate() and deactivate() functions.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>closeIcon</td>
                            <td>string</td>
                            <td>pi pi-times</td>
                            <td>Icon of the close icon.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Events</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onActivate</td>
                            <td>event.originalEvent: Click event</td>
                            <td>Activates the content.</td>
                        </tr>
                        <tr>
                            <td>onDeactivate</td>
                            <td>event.originalEvent: Click event</td>
                            <td>Deactivates the content.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Methods</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>activate</td>
                            <td>-</td>
                            <td>Activates the content.</td>
                        </tr>
                        <tr>
                            <td>deactivate</td>
                            <td>-</td>
                            <td>Deactivates the content.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Templates</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>display</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>content</td>
                            <td>-</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-inplace</td>
                            <td>Container element</td>
                        </tr>
                        <tr>
                            <td>p-inplace-display</td>
                            <td>Display container</td>
                        </tr>
                        <tr>
                            <td>p-inplace-content</td>
                            <td>Content container</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/inplace" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-inplace-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;p-inplace closable="closable" [style]="&#123;'min-height':'33px'&#125;"&gt;
    &lt;ng-template pTemplate="display"&gt;
        Click to Edit
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="content"&gt;
        &lt;input type="text" value="PrimeNG" pInputText&gt;
    &lt;/ng-template&gt;
&lt;/p-inplace&gt;

&lt;h5&gt;Image&lt;/h5&gt;
&lt;p-inplace&gt;
    &lt;ng-template pTemplate="display"&gt;
        &lt;div class="inline-flex align-items-center"&gt;
            &lt;span class="pi pi-image" style="vertical-align: middle"&gt;&lt;/span&gt;
            &lt;span class="ml-2"&gt;View Picture&lt;/span&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="content"&gt;
        &lt;img src="assets/showcase/images/demo/galleria/galleria5.jpg" alt="Nature"&gt;
    &lt;/ng-template&gt;
&lt;/p-inplace&gt;

&lt;h5&gt;Data&lt;/h5&gt;
&lt;p-inplace&gt;
    &lt;ng-template pTemplate="display"&gt;
        &lt;div class="inline-flex align-items-center"&gt;
            &lt;span class="pi pi-table" style="vertical-align: middle"&gt;&lt;/span&gt;
            &lt;span class="ml-2"&gt;View Data&lt;/span&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="content"&gt;
        &lt;p-table [value]="cars" responsiveLayout="scroll"&gt;
            &lt;ng-template pTemplate="header"&gt;
                &lt;tr&gt;
                    &lt;th&gt;Vin&lt;/th&gt;
                    &lt;th&gt;Year&lt;/th&gt;
                    &lt;th&gt;Brand&lt;/th&gt;
                    &lt;th&gt;Color&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/ng-template&gt;
            &lt;ng-template pTemplate="body" let-car&gt;
                &lt;tr&gt;
                    &lt;td&gt;&#123;&#123;car.vin&#125;&#125;&lt;/td&gt;
                    &lt;td&gt;&#123;&#123;car.year&#125;&#125;&lt;/td&gt;
                    &lt;td&gt;&#123;&#123;car.brand&#125;&#125;&lt;/td&gt;
                    &lt;td&gt;&#123;&#123;car.color&#125;&#125;&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/ng-template&gt;
        &lt;/p-table&gt;
    &lt;/ng-template&gt;
&lt;/p-inplace&gt;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-inplace-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
